<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <a href="javascript:void(0)" @click="haha">点我试试</a>
    <hr/>
    <!-- child组件标签 -->
    <child>
      <template slot="header">
        <h4 class='header111'>我是header插槽</h4>
        <!-- h4的内容会放在模板内 name为header插槽的位置 -->
      </template>

      <p>我是默认插槽</p>
      <!-- p的内容会放在模板内 默认插槽的位置 -->

      <template slot="footer">
        <h4 class="footer">我是footer插槽</h4>
      </template>

      <!-- slot-scope 指明使用绑定在user插槽的数据(mydata:data123),并把数据赋给user1 (user1 = {mydata:data:123}) -->
      <!-- 注意：插槽的数据绑定是在组件内，不是在自定义组件标签中！！！ -->
      <template slot-scope="user1" slot="user">
        <hr>
        <h3>user插槽-作用域插槽(插槽上绑定了数据)</h3>
        <ul>
          <li v-for="item in user1.mydata">{{item.name}} -> {{item.age}}</li>
        </ul>
      </template>

    </child>

  </div>
</template>

<script>
  import hello_child from '@/views/hello_child' //导入组件
  export default {
    name: 'Hello',
    data() {
      return {
        msg: '这是hello页面',
      }
    },
    methods: {
      haha: function () {
        alert('哈哈哈！');
      }
    },
    components: {
      child: hello_child //会在当前模板中查找child标签，并用hello_child组件替换
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    /* display: inline-block; */
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  .header111 {
    color: blue
  }

  .footer {
    color: green
  }
</style>